<template>
	<a-card :bordered="false" style="margin-bottom: 10px">
		<a-form ref="searchFormRef" name="advanced_search" class="ant-advanced-search-form" :model="searchFormState">
			<a-row :gutter="24">
				<a-col :span="6">
					<a-form-item name="searchKey" label="关键字">
						<a-input v-model:value="searchFormState.searchKey" placeholder="请输入关键字" />
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-form-item label="仓库" name="warehouseId">
						<xn-page-selector
							ref="warehouseRef"
							:show-search="true"
							search-field="warehouseName"
							:field-names="{ label: 'warehouseName', value: 'id' }"
							:page-function="(param) => storeCenterApi.getPage(param)"
							v-model:value="searchFormState.warehouseId"
							placeholder="请选择仓库"
						>
						</xn-page-selector>
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-form-item label="商品" name="materialId">
						<xn-page-selector
							ref="procompetitorRef"
							:show-search="true"
							search-field="name"
							:field-names="{ label: 'name', value: 'id' }"
							:page-function="(param) => promaterialApi.getPage(param)"
							v-model:value="searchFormState.materialId"
							placeholder="请选择商品"
						>
						</xn-page-selector>
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-button type="primary" @click="tableRef.refresh(true)">
						<template #icon>
							<SearchOutlined />
						</template>
						查询
					</a-button>
					<a-button class="snowy-buttom-left" @click="reset">
						<template #icon><redo-outlined /></template>
						重置
					</a-button>
				</a-col>
			</a-row>
		</a-form>
	</a-card>
	<a-card :bordered="false">
		<s-table
			ref="tableRef"
			:columns="categoryState == bizTool.productName ? productColumns : columns"
			:data="loadData"
			bordered
			:scroll="{ x: 700 }"
			:tool-config="toolConfig"
		>
			<template #operator class="table-operator">
				<div style="display: flex; justify-content: space-between">
					<div>
						<a-select
							:default-value="globalOrg[0]"
							ref="select"
							:options="globalOrg"
							v-model:value="searchFormState.globalOrg"
							style="width: 120px"
						>
						</a-select>

						<a-select
							@change="onCategoryChange"
							:default-value="categoryState"
							v-model:value="categoryState"
							style="width: 120px; margin-left: 20px"
						>
							<a-select-option value="物料">物料</a-select-option>
							<a-select-option value="产品">产品</a-select-option>
						</a-select>
					</div>

					<div v-if="hasPerm('WAREHOUSE_PRODUCE_LOG_IMPORT')">
						<a-button type="primary"> 导入 </a-button>
					</div>
				</div>
			</template>

			<template #bodyCell="{ column, record, index }">
				<template v-if="column.dataIndex === 'index'">
					<span>{{ index + 1 }}</span>
				</template>
				<template v-if="column.dataIndex === 'waresBeNum'">
					<span>{{ record.waresBeNum }}</span>
				</template>

				<template v-if="column.dataIndex === 'waresEnNum'">
					<span>{{ record.waresEnNum }}</span>
				</template>
				<template v-if="column.dataIndex === 'waresNumChange'">
					<span>{{ record.waresNumChange }}</span>
				</template>
			</template>
		</s-table>
	</a-card>
</template>

<script setup name="product">
	import productLogApi from '@/api/warehouse/productLogApi'
	import promaterialApi from '@/api/base_data/promaterialApi'
	import storeCenterApi from '@/api/base_data/storeCenterApi'
	import { onMounted } from 'vue'
	import xnPageSelector from '@/components/XnPageSelect/index.vue'
	import bizTool from '@/utils/bizTool'

	onMounted(() => {
		nextTick(() => {
			warehouseRef.value.onPage({})
			procompetitorRef.value.onPage({})
		})
	})

	const onCategoryChange = (value, item) => {
		categoryState.value = value
		tableRef.value.refresh()
	}

	const columns = [
		{
			title: '序号',
			dataIndex: 'index',
			ellipsis: true,
			width: 80,
			align: 'center'
		},
		{
			title: '仓库编号',
			dataIndex: 'warehouseNum',
			width: 120,
			align: 'center'
		},
		{
			title: '仓库名称',
			dataIndex: 'warehouseName',
			width: 150,
			align: 'center',
			ellipsis: true
		},
		{
			title: '商品名称',
			dataIndex: 'materialName',
			align: 'center',
			width: 150,
			ellipsis: true
		},

		{
			title: '变动前数量',
			dataIndex: 'waresBeNum',
			align: 'center',
			width: 100,
			ellipsis: true
		},
		{
			title: '变动后数量',
			dataIndex: 'waresEnNum',
			align: 'center',
			width: 100,
			ellipsis: true
		},
		{
			title: '变动数量',
			dataIndex: 'waresNumChange',
			align: 'center',
			width: 100,
			ellipsis: true
		},
		{
			title: '变动前含税单价',
			dataIndex: 'waresBePrice',
			align: 'center',
			width: 120,
			ellipsis: true
		},
		{
			title: '变动后含税单价',
			dataIndex: 'waresEndPrice',
			align: 'center',
			width: 120,
			ellipsis: true
		},
		{
			title: '变动金额',
			dataIndex: 'waresAmountChange',
			align: 'center',
			width: '120px'
		},
		{
			title: '变动前总金额',
			dataIndex: 'waresBeAmount',
			align: 'center',
			width: 120,
			ellipsis: true
		},
		{
			title: '变动后总金额',
			dataIndex: 'waresEnAmount',
			align: 'center',
			width: 120,
			ellipsis: true
		},
		{
			title: '业务类型',
			dataIndex: 'type',
			align: 'center',
			width: 130
		}
	]

	const productColumns = [
		{
			title: '序号',
			dataIndex: 'index',
			ellipsis: true,
			width: 80,
			align: 'center'
		},
		{
			title: '仓库编号',
			dataIndex: 'warehouseNum',
			width: 120,
			align: 'center'
		},
		{
			title: '仓库名称',
			dataIndex: 'warehouseName',
			width: 150,
			align: 'center',
			ellipsis: true
		},
		{
			title: '产品名称',
			dataIndex: 'productName',
			align: 'center',
			width: 150,
			ellipsis: true
		},

		{
			title: '变动前数量',
			dataIndex: 'waresBeNum',
			align: 'center',
			width: 100,
			ellipsis: true
		},
		{
			title: '变动后数量',
			dataIndex: 'waresEnNum',
			align: 'center',
			width: 100,
			ellipsis: true
		},
		{
			title: '变动数量',
			dataIndex: 'waresNumChange',
			align: 'center',
			width: 100,
			ellipsis: true
		},
		{
			title: '变动前含税单价',
			dataIndex: 'waresBePrice',
			align: 'center',
			width: 120,
			ellipsis: true
		},
		{
			title: '变动后含税单价',
			dataIndex: 'waresEndPrice',
			align: 'center',
			width: 120,
			ellipsis: true
		},
		{
			title: '变动金额',
			dataIndex: 'waresAmountChange',
			align: 'center',
			width: '120px'
		},
		{
			title: '变动前总金额',
			dataIndex: 'waresBeAmount',
			align: 'center',
			width: 120,
			ellipsis: true
		},
		{
			title: '变动后总金额',
			dataIndex: 'waresEnAmount',
			align: 'center',
			width: 120,
			ellipsis: true
		},
		{
			title: '业务类型',
			dataIndex: 'type',
			align: 'center',
			width: 130
		}
	]

	const toolConfig = { refresh: true, height: true, columnSetting: true, striped: false }
	// 定义tableDOM
	const tableRef = ref(null)
	const warehouseRef = ref()
	const procompetitorRef = ref()
	const searchFormRef = ref()
	const searchFormState = ref({})
	import tool from '@/utils/tool'
	const categoryState = ref('物料')

	const globalOrg = tool.dictList('global_org')
	// 表格查询 返回 Promise 对象
	const loadData = (parameter) => {
		parameter['category'] = categoryState.value
		return productLogApi
			.getPage(Object.assign(parameter, searchFormState.value))
			.then((data) => {
				return data
			})
			.catch(() => {})
	}
	// 重置
	const reset = () => {
		searchFormRef.value.resetFields()
		tableRef.value.refresh(true)
	}
	// 删除
	const remove = (record) => {
		let params = [
			{
				id: record.id
			}
		]
		warehouseApi.delWarehouse(params).then(() => {
			tableRef.value.refresh()
		})
	}
</script>

<style scoped>
	.ant-form-item {
		margin-bottom: 0 !important;
	}

	.primaryAdd {
		margin-right: 10px;
	}

	.snowy-buttom-left {
		margin-left: 8px;
	}
</style>
